<script setup>
import { ref } from "vue";
import { useUserInfoStore } from "@/stores/userInfo.js";
import { userNicknameUpdateService } from "@/api/user.js";
import { ElMessage } from "element-plus";

const userInfoStore = useUserInfoStore();

// 昵称
const nickname = ref(userInfoStore.info.userNickname);
// 昵称验证规则
const isValidNickname = (value) => /^[A-Za-z0-9\u4e00-\u9fa5]+$/.test(value); // 允许字母、数字和汉字
// 修改个人信息
const updateUserInfo = async () => {
    if (isValidNickname(nickname.value) === false) {
        ElMessage.error("昵称只能包含字母、数字和汉字");
        return;
    }
    // 调用接口
    let result = await userNicknameUpdateService(nickname.value);
    ElMessage.success(result.message ? result.message : "个人信息修改成功");
    // 修改pinia中的个人信息
    userInfoStore.info.userNickname = nickname.value;
};

// 触发文件选择
const uploadRef = ref();

//用户头像地址
const imgUrl = ref(userInfoStore.info.userPicture);

// 图片上传成功回调函数
const uploadSuccess = (result) => {
    console.log(result);
    imgUrl.value = result.data;
    userInfoStore.info.userPicture = result.data;
    ElMessage.success("头像上传成功");
};
</script>
<template>
    <el-main>
        <el-card class="page-container">
            <template #header>
                <div class="header">
                    <span>基本资料</span>
                </div>
            </template>
            <el-row style="margin-bottom: 20px">
                <el-col>
                    <el-upload
                        ref="uploadRef"
                        :show-file-list="false"
                        :auto-upload="ture"
                        action="http://localhost:8081/user/uploadAvatar"
                        name="file"
                        :headers="{ Authorization: userInfoStore.token }"
                        :on-success="uploadSuccess"
                    >
                        <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                        <img v-else :src="avatar" width="278" />
                    </el-upload>
                    <br />
                    <el-button
                        type="primary"
                        :icon="Plus"
                        size="large"
                        @click="uploadRef.$el.querySelector('input').click()"
                        :on-success="uploadSuccess"
                    >
                        选择图片
                    </el-button>
                </el-col>
            </el-row>
            <el-form :rules="rules" label-width="100px" size="large">
                <el-form-item label="登录账号">
                    <el-input
                        v-model="userInfoStore.info.userAccount"
                        disabled
                    ></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="nickname">
                    <el-input v-model="nickname"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateUserInfo"
                        >提交修改</el-button
                    >
                </el-form-item>
            </el-form>
        </el-card>
    </el-main>
</template>

<style scoped lang = "scss">
@import "@/assets/style/config.scss";
.page-container {
    width: 85%;
    border-radius: $borderRadius;
}
.avatar {
    width: 200px;
    height: 200px;
    border-radius: $borderRadius;
}
</style>